<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>更新药品</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <script type="text/javascript" src="../js/axios.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/message.js"></script>
    <script type="text/javascript" src="../js/sort.js"></script>
</head>
<body style="background-color: #FFAA7F;">
<div id="app">
    <fieldset style="margin-top: 100px; border-radius: 10px; border-color: #5555FF;">
        <legend style="text-align: center; color:#5555FF;">添加药品</legend>
        <div class="form-group">
            <label>药品名*:</label>
            <input type="text" maxlength="30" v-model="drugName" @blur="nameCheck()"/>
            <span class="msg" v-if="nameFlag">{{nameMsg}}</span>
        </div>
        <div class="form-group">
            <label>药品分类*:</label>
            <select id="sortSelect" v-model="drugSort" @change="sortCheck()">
                <option value="0">---</option>
                <option v-for="item in sortMap" :value="item.code">{{item.name}}</option>
            </select>
            <span class="msg" v-if="sortFlag">{{sortMsg}}</span>
        </div>
        <div class="form-group">
            <label>价格*:</label>
            <input type="text" maxlength="11" v-model="drugPrice" @blur="priceCheck()"/>
            <span class="msg" v-if="priceFlag">{{priceMsg}}</span>
        </div>
        <div class="form-group">
            <label>制造商*</label>
            <input type="text" maxlength="30" v-model="drugProducer" @blur="producerCheck()"/>
            <span class="msg" v-if="producerFlag">{{producerMsg}}</span>
        </div>
        <div class="form-group">
            <label></label>
            <button onclick="location.replace('adminMenu.html');">返回</button>
            <button @click="addDrug()">保存</button>
        </div>
    </fieldset>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            drugId: "",
            drugCode: "",
            drugName: "",
            drugSort: 0,
            drugPrice: 0.0,
            drugProducer: "",
            nameFlag: true,
            sortFlag: true,
            priceFlag: true,
            producerFlag: true,
            nameMsg: "",
            sortMsg: "",
            priceMsg: "",
            producerMsg: "",
            sortMap: []
        },
        methods: {
            nameCheck: function () {
                var reg = /^[a-zA-Z\d\u4e00-\u9fa5]{0,30}$/;
                if (this.drugName == null || this.drugName == "") {
                    this.nameMsg = "请输入药品名";
                    this.nameFlag = true;
                } else if (!reg.test(this.drugName)) {
                    this.nameMsg = "限制30字以内，可以使用汉字数字字母";
                    this.nameFlag = true;
                } else {
                    this.nameFlag = false;
                }
            },
            sortCheck: function () {
                this.sortMsg = "请选择药品分类";
                this.sortFlag = (this.drugSort == null || this.drugSort == 0);
            },
            priceCheck: function () {
                var reg = /^\d{1,8}(\.\d{1,2})?$/;
                if (this.drugPrice == null || this.drugPrice == "") {
                    this.priceMsg = "请输入药品价格"
                    this.priceFlag = true;
                } else if (!reg.test(this.drugPrice)) {
                    this.priceMsg = "整数限制8位以内，小数限制2位以内";
                    this.priceFlag = true;
                } else {
                    this.priceFlag = false;
                }
            },
            producerCheck: function () {
                var reg = /^[a-zA-Z\d\u4e00-\u9fa5]{0,30}$/;
                if (this.drugProducer == null || this.drugProducer == "") {
                    this.producerMsg = "请输入药品生产厂家"
                    this.producerFlag = true;
                } else if (!reg.test(this.drugProducer)) {
                    this.producerMsg = "限制30字以内，可以使用汉字数字字母";
                    this.producerFlag = true;
                } else {
                    this.producerFlag = false;
                }
            },
            addDrug: function () {
                this.nameCheck();
                this.sortCheck();
                this.priceCheck();
                this.producerCheck();
                if (!this.nameFlag && !this.sortFlag && !this.priceFlag && !this.producerFlag) {
                    axios.post("http://localhost:8000/bracelet/release/api/adddrug",
                        {
                            "drugName": this.drugName,
                            "drugSort": this.drugSort,
                            "drugPrice": this.drugPrice,
                            "drugProducer": this.drugProducer
                        })
                        .then(res => {
                            if (res.data.result) {
                                alert("添加成功!");
                                setTimeout("location.replace('adminMenu.html')", 2000);
                            } else {
                                alert("添加失败!")
                            }
                        })
                        .catch(error => {
                            console.log(error.message);
                            location.href = "../500.html";
                        });
                }
            }
        },
        mounted: function () {
            axios.post("http://localhost:8000/bracelet/release/api/getsort",
                {
                    "sortType": SORT.药品
                })
                .then(res => {
                    this.sortMap = res.data.result;
                })
                .catch(error => {
                    location.href = "../500.html";
                });
        },
    })
</script>
</body>
</html>
